<template>
    <div class="addContainer">
        <div class="header">
            <el-steps :space="200" :active="currentStep" simple>
                <el-step title="填写图书信息" :icon="editIcon" />
                <el-step title="上传封面" :icon="uploadIcon" />
                <el-step title="填写商品详情" :icon="picIcon" />
            </el-steps>
        </div>
        <div class="content">
            <div v-if="currentStep === 0" class="stepOne">
                <StepOne ref="stepOne" @form="setBookInfo($event)" @step="stepControl($event)" />
            </div>
            <div v-else-if="currentStep === 1" class="stepTwo">
                <StepTwo
                    ref="stepTwo"
                    :cover="bookInfo.coverImg"
                    @form="setBookInfo($event)"
                    @step="stepControl($event)"
                />
            </div>
            <div v-else-if="currentStep === 2" class="stepThree">
                <StepThree ref="stepThree" @form="setBookInfo($event)" @step="stepControl($event)" />
            </div>
            <div v-else>
                <el-result
                    :icon="result.icon"
                    :title="result.title"
                    :sub-title="result.subtitle"
                    v-loading="isLoading"
                    element-loading-text="提交中..."
                >
                    <template #extra v-if="result.icon === 'success'">
                        <el-button type="primary" @click="$router.replace({ name: 'bookDetail' })">去查看</el-button>
                    </template>
                    <template #extra v-else>
                        <el-button type="primary" @click="$router.replace({ name: 'home' })">回到首页</el-button>
                    </template>
                </el-result>
            </div>
        </div>
    </div>
</template>

<script>
import { Edit, UploadFilled, Picture } from "@element-plus/icons-vue";
import StepOne from "@/components/AddBook/stepOne.vue";
import StepTwo from "@/components/AddBook/stepTwo.vue";
import StepThree from "@/components/AddBook/stepThree.vue";
import { markRaw } from "vue";
import service from "@/utils/request";

export default {
    components: { StepOne, StepTwo, StepThree },
    data() {
        return {
            editIcon: markRaw(Edit),
            uploadIcon: markRaw(UploadFilled),
            picIcon: markRaw(Picture),
            currentStep: 0,
            bookInfo: {
                title: "",
                author: "",
                isbn: "",
                categoryID: "",
                coverImg: "",
                pubDate: "",
                publisher: "",
                summary: "",
                language: "",
                soldNum: 0,
                stockNum: "",
                price: "",
            },
            result: {
                icon: "",
                title: "",
                subtitle: "",
            },
            isLoading: true,
        };
    },
    methods: {
        stepControl(value) {
            // console.log(value);
            this.currentStep = value;
        },
        setBookInfo(value) {
            this.bookInfo = { ...this.bookInfo, ...value };
            // console.log(this.bookInfo);
        },
    },
    watch: {
        currentStep: {
            async handler(oldVal) {
                // console.log(oldVal);
                if (oldVal === 3) {
                    this.isLoading = true;
                    sessionStorage.removeItem("bookInfo");
                    sessionStorage.removeItem("orderInfo");
                    await service({
                        url: "/book/add",
                        method: "post",
                        headers: {
                            "Content-Type": "application/json",
                        },
                        data: {
                            ...this.bookInfo,
                        },
                    })
                        .then((res) => {
                            // console.log(res);
                            this.result = {
                                icon: "success",
                                title: "上传成功",
                                subtitle: "请到 图书管理-图书信息 查看",
                            };
                        })
                        .catch(() => {
                            this.result = {
                                icon: "error",
                                title: "上传失败",
                                subtitle: "请联系技术人员",
                            };
                        });
                    this.isLoading = false;
                }
            },
        },
    },
};
</script>

<style lang="scss" scoped>
.addContainer {
    height: 100%;
    display: flex;
    flex-direction: column;

    .content {
        flex: 2;
        padding: 20px;
        width: 90%;
    }
}
</style>
